﻿@{
    ViewBag.PageTitle = "确认支付 - " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<!--导航菜单.开始-->
<div class="wrapper">
    <div class="location">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>在线支付</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</div>
<!--导航菜单.结束-->

<div class="wrapper">
    <div class="payment-box">
        <div class="head-box">
            <div class="title">
                <span class="icon iconfont icon-check"></span>
                <span>订单提交成功，去付款吧！</span>
            </div>
            <div class="item-box">
                <div class="item">
                    <div class="left">订单编号</div>
                    <div class="right">{{orderModel.orderNo}}</div>
                </div>
                <div class="item">
                    <div class="left">订单金额</div>
                    <div class="right">
                        <span class="price">{{orderModel.orderAmount}}</span>元
                    </div>
                </div>
            </div>
        </div>
        <div class="screen-box">
            <div class="nav-bar">支付方式</div>
            <div class="payment-list">
                <div v-for="(item,index) in paymentList" :key="index" @@click="changePayment(item)" :class="{active:paymentModel.id===item.id}" class="list-box">
                    <span v-if="item.payment.type===1" class="icon iconfont icon-balance"></span>
                    <span v-if="item.payment.type===2" class="icon iconfont icon-weixin"></span>
                    <span v-if="item.payment.type===3" class="icon iconfont icon-alipay"></span>
                    <div class="txt-box">
                        <span class="name">{{item.title}}</span>
                        <span v-if="item.payment.remark" class="text">{{item.payment.remark}}</span>
                    </div>
                </div>
            </div>
            <div class="btn-box">
                <el-button type="danger" class="btn" @@click="confirm">提交订单</el-button>
            </div>
        </div>
    </div>
</div>

<el-dialog title="扫码支付" :visible.sync="codeVisible">
    <div class="native-box">
        <div class="img-box">
            <img :src="'data:text/css;base64,'+codeData">
        </div>
        <span class="text">打开微信扫一扫完成支付</span>
    </div>
</el-dialog>

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                codeVisible: false, //二维码显示隐藏
                codeData: null, //BASE64图片
                paymentList: [], //支付方式列表
                paymentModel: {}, //当前支付方式
                orderModel: {
                    id: 0,
                    orderNo: null,
                    orderAmount: 0,
                    paymentId: 0,
                    paymentStatus: 0
                }
            },
            methods: {
                //加载订单信息
                async loadData(no) {
                    let _this = this;
                    if (!no) {
                        this.$alert('订单参数有误，请检查重试', '错误提示', {
                            confirmButtonText: '确定',
                            callback: action => {
                                common.back(-1);
                            }
                        });
                        return;
                    }
                    if (no.startsWith("RN")) {
                        await AxiosAjax({
                            url: `/account/rechargeno/${no}`,
                            success: function (res) {
                                _this.orderModel.id = res.data.id;
                                _this.orderModel.orderNo = res.data.rechargeNo;
                                _this.orderModel.orderAmount = res.data.amount;
                                _this.orderModel.paymentId = res.data.paymentId;
                                _this.orderModel.paymentStatus = res.data.status;
                            }
                        });
                    } else {
                        await AxiosAjax({
                            url: `/account/orderno/${no}`,
                            success: function (res) {
                                _this.orderModel.id = res.data.id;
                                _this.orderModel.orderNo = res.data.orderNo;
                                _this.orderModel.orderAmount = res.data.orderAmount;
                                _this.orderModel.paymentId = res.data.paymentId;
                                _this.orderModel.paymentStatus = res.data.paymentStatus;
                            }
                        });
                    }
                    //判断是否已支付,如果是已支付则直接跳转到成功页面
                    if (_this.orderModel.paymentStatus === 1) {
                        common.linkUrl(`/payment/success?no=${_this.orderModel.orderNo}`);
                    }
                },
                //初始化数据
                async initData(no) {
                    let _this = this;
                    //加载订单信息
                    await _this.loadData(no);
                    //加载支付方式列表
                    let sendUrl = `/client/payment/view/10?siteId=${$site}`;
                    if (no.startsWith("RN")) {
                        sendUrl += `&types=pc,native`;
                    } else {
                        sendUrl += `&types=balance,pc,native`;
                    }
                    await AxiosAjax({
                        url: sendUrl,
                        success: function (res) {
                            _this.paymentList = res.data;
                        }
                    });
                    //选中订单支付方式
                    var obj = _this.paymentList.find(val => val.id === _this.orderModel.paymentId);
                    if (obj) {
                        _this.paymentModel = obj;
                    }
                },
                //选择支付方式
                async changePayment(item) {
                    let _this = this;
                    if (_this.orderModel.paymentId === item.id) {
                        return;
                    }
                    let sendUrl = `/account/order/payment`;
                    if (_this.orderModel.orderNo.startsWith("RN")) {
                        sendUrl = `/account/recharge/payment`;
                    }
                    //修改订单支付方式
                    await AxiosAjax({
                        method: "put",
                        url: sendUrl,
                        loading: true,
                        data: {
                            id: _this.orderModel.id,
                            paymentId: item.id
                        },
                        success: function (res) {
                            _this.paymentModel = item;
                        }
                    });
                    //重新加载订单
                    await _this.loadData(_this.orderModel.orderNo);
                },
                //确认支付
                async confirm() {
                    let _this = this;
                    if (!_this.paymentModel.type) {
                        _this.$message({
                            message: '请选择付款方式',
                            type: 'warning'
                        });
                        return;
                    }
                    //判断支付方式选择不同的接口
                    if (_this.paymentModel.type == "balance") {
                        await _this.balancePay();
                    }
                    if (_this.paymentModel.type == "pc") {
                        await _this.pcPay();
                    }
                    if (_this.paymentModel.type == "native") {
                        await _this.nativePay();
                  
                    }
                },
                //余额支付
                async balancePay() {
                    let _this = this;
                    let pay = _this.paymentModel;
                    let item = _this.orderModel;
                    //调用下单接口
                    AxiosAjax({
                        method: "post",
                        url: `${pay.payment.payUrl}`,
                        loading: true,
                        data: {
                            outTradeNo: item.orderNo
                        },
                        success: function (res) {
                            common.linkUrl(`/payment/result?no=${item.orderNo}`);
                        }
                    });
                },
                //电脑支付
                async pcPay() {
                    let _this = this;
                    let pay = _this.paymentModel;
                    let item = _this.orderModel;
                    //获取当前页面
                    let href = window.location.href;
                    href = href.substring(0, href.indexOf('/'));
                    let uri = encodeURIComponent(href + `/payment/result?no=${item.orderNo}`);
                    //调用统一下单接口
                    AxiosAjax({
                        method: "post",
                        url: `${pay.payment.payUrl}`,
                        loading: true,
                        data: {
                            outTradeNo: item.orderNo,
                            description: "商品订单",
                            returnUri: uri
                        },
                        success: function (res) {
                            common.linkUrl(res.data.url);
                        }
                    });
                },
                //扫码支付
                async nativePay() {
                    let _this = this;
                    let pay = _this.paymentModel;
                    let item = _this.orderModel;
                    //调用统一下单接口
                    AxiosAjax({
                        method: "post",
                        url: `${pay.payment.payUrl}`,
                        loading: true,
                        data: {
                            outTradeNo: item.orderNo,
                            description: "商品订单"
                        },
                        success: function (res) {
                            _this.codeVisible = true;
                            _this.codeData = res.data.codeData;
                            //5秒后调用监听事件
                            setTimeout(function () {
                                _this.handleNative(item.orderNo);
                            }, 5000);
                        }
                    });
                },
                //查询订单是否支付
                async handleNative(no) {
                    let _this = this;
                    let status = false;
                    if (no.startsWith("RN")) {
                        await AxiosAjax({
                            url: `/account/rechargeno/${no}`,
                            success: function (res) {
                                if (res.data.status) {
                                    status = true;
                                }
                            }
                        });
                    } else {
                        await AxiosAjax({
                            url: `/account/orderno/${no}`,
                            success: function (res) {
                                if (res.data.paymentStatus) {
                                    status = true;
                                }
                            }
                        });
                    }
                    //判断是否已支付,如果是已支付则直接跳转到成功页面
                    if (status) {
                        common.linkUrl(`/payment/result?no=${no}`);
                    } else if (_this.codeVisible) {
                        //5秒后调用监听事件
                        setTimeout(function () {
                            _this.handleNative(no);
                        }, 5000);
                    }
                }
            },
            created() {
                let orderNo = common.queryValue("no");
                this.initData(orderNo);
            }
        })
    </script>
}